<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>ProgressBar</title>
    <script type="text/javascript" language="javascript" src="progressbar/progressbar.nocache.js"></script>
  </head>

  <body>
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
	
	<H1> Progress Bar Sample Page </H1>
	<H3> Overview </H3>
	<P> Displays Progress Bar</p>
	<H3> Example </H3>
	<H3> Sample Code </H3>
	<table border="1">


	</table>
	<H3> Input Data </H3>
	This widget accepts various data format. 
	<H4> 1. Single Data Value</br> </H4>
	A single value will be considered as percentage task complition. The value has to be numeric value between zero to 1. 
	For example,  
	   		data.addRows(1);
  		    data.setValue(0, 0, 0.3);
	 Progress bar will be 30% and display will be .
	  
	<H4> 1. Two data values </br> </H4>
	If there are two rows or two columns, progress bar will calculate percentage and display the value in progress bar.
	For example,
	   		data.addRows(2);
  		    data.setValue(0, 0, 3);
  		    data.setValue(1, 0, 6);
	 
	 Progress Bar will calculate percentage complete as 0.5 or 50% ( 3/6) 
	 The progress value will be 
	 
	 For column values 
	   		data.addColumns(2);
  		    data.setValue(0, 0, 3);
  		    data.setValue(0, 1, 6);
	Again, the progress bar will be set at 0.5 or 50% (3/6)
		 
	 
	<H3> Options </H3>
	Progress bar visualization accepts two options
	
	<table>
	<tr> 
		<th>Name </th> <th> Type </th><th> Default </th> <th> </th>Description</th>
	</tr>


	<tr> 
		<td> backgroundColor</td> <td> String </td> <td> grey </td> <td> Sets color of unfilled progress bar</td> 
	</tr>
	<tr> 
	<td>foregroundColor </td> <td> String </td><td> blue<td> Sets color of filled progress bar<td> </td>
	</tr>

	<tr> 
	<td> height </td> <td>number </td><td> 30 </td> <td>Sets height of the progress bar </td> </td>
	</tr>

	<tr> 
	<td> width </td> <td> number</td><td> -200</td> <td>  Sets width of the progress bar</td>
	</tr>

	</table>
	
	<H3> Methods and Events </H3>
	<table>
	<tr> <th> Method </th> <th> Return Type </th> <th>Description </th> </tr>
	<tr>  <td> draw (data, options> </td> <td> none </td> <td> Draws the progressbar</td>  </tr>
	</table>
	Given simple nature of this visualization, no other methods or events supported. 
	
	<H3> Google Spreadsheet Integration </H3>
	
	<H3> Contact Information </H3>
	<p> Your comments are welcome! Please contact mailto:meera.bavadekar@gmail.com to report bugs and enhancements </p>
  </body>
</html>